<script setup lang="ts">
import GameCard from './GameCard.vue'
import { ref, onMounted } from 'vue'
import { getCategory, getGameList } from '@/api/game'
import { Search } from '@element-plus/icons-vue'

/**
 * 搜索框
 */
let searchInput = ref('')
const search = () => {
  fetchGameList('', searchInput.value) //赋空分类
}

/**
 * 分类菜单
 * 耦合：分页
 */
const menuIcons = ['⚔️', '🔫', '🤺', '🔍', '🧩', '🏎️', '🀄', '🧙', '🛹', '🎲', '🎮']
const activeIndex = ref('')
const handleSelect = (index: string) => {
  activeIndex.value = index
  currentPage.value = 1
  searchInput.value = '' //清空搜索框,不然点分页会耦合搜索
  fetchGameList(activeIndex.value)
}

/**
 * 获取分类菜单
 */
let categoryList = ref()
let gameList = ref()
const fetchCategoryList = async () => {
  try {
    const response = await getCategory()
    categoryList.value = response.data.categorys
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  fetchCategoryList()
})

/**
 * 获取游戏列表
 * 耦合：分类菜单、分页、挂载前、搜索
 */
const fetchGameList = async (category?: string, keyword?: string) => {
  try {
    const response = await getGameList(currentPage.value, pageSize.value, category, keyword)
    gameList.value = response.data.result
    total.value = response.data.count
  } catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  fetchGameList()
})

/**
 * 分页
 * 耦合：分类菜单、搜索
 */
const pageSize = ref(16)
const currentPage = ref(1)
const total = ref(0)

const handleCurrentChange = () => {
  if (searchInput.value === '') {
    fetchGameList(activeIndex.value)
  } else {
    search()
  }
}
</script>

<template>
  <div class="game-list-body">
    <!-- 搜索栏 -->
    <el-row style="margin: 20px 0">
      <el-input
        v-model="searchInput"
        style="width: 190px; margin-right: 15px"
        placeholder="搜索童年回忆"
        :prefix-icon="Search"
      />
      <el-button type="danger" @click="search">搜索</el-button>
    </el-row>
    <el-row :gutter="20" justify="space-between">
      <!-- 分类菜单 -->
      <el-col :span="4">
        <span style="font-size: 20px">游戏分类</span>
        <el-menu @select="handleSelect" :default-active="activeIndex">
          <el-menu-item index="">
            <span>🕹️&nbsp;&nbsp;全部</span>
          </el-menu-item>
          <el-menu-item
            v-for="(category, index) in categoryList"
            :key="category.id"
            :index="category.id"
          >
            <span> {{ menuIcons[index] }}&nbsp;&nbsp;</span>
            <span>{{ category.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <!-- 游戏列表 -->
      <el-col :span="20">
        <el-row :gutter="20" justify="start">
          <el-col :span="6" v-for="game in gameList" :key="game.id" style="margin-top: 30px">
            <GameCard :item="game" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row justify="center">
      <!-- 
        分页 
      -->
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :hide-on-single-page="true"
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next,jumper"
        class="pagination"
      />
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.game-list-body {
  width: 1200px;
  min-height: 80vh;
  margin: 0 auto;
  padding: 0 40px;
}
/* 去除右侧边框 */
.el-menu {
  border-right: none;
}
.pagination {
  margin-top: 20px;
}
</style>
